import React from "react";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
import css from "./index.module.scss";
import cn from "classnames";
type AlertType = "success" | "error" | "warn";

interface AlertProps {
  type: AlertType;
  message: string;
}

const Alert: React.FC<AlertProps> = (props: AlertProps) => {
  const { type, message } = props;
  return (
    <div
      className={cn(
        css.alert,
        css[type],
        "animate__animated animate__fadeInDown"
      )}
    >
      {type === "success" && <i className="icon iconfont">&#xe8c3;</i>}
      {type === "error" && <i className="icon iconfont">&#xe68c;</i>}
      {type === "warn" && <i className="icon iconfont">&#xe62e;</i>}
      {message}
    </div>
  );
};

export const alert = (type: AlertType, message: string) => {
  const alertContainer = document.body;
  if (alertContainer) {
    const portalContainer = document.createElement("div");
    portalContainer.className = css.alert_box;
    // portalContainer.className = 'animate__animated animate__fadeInDown';
    alertContainer.appendChild(portalContainer);
    const root = createRoot(portalContainer);
    root.render(<Alert type={type} message={message} />);
    setTimeout(() => {
      alertContainer.removeChild(portalContainer);
    }, 1500);
  }
};
